<template>
    <div class="orderBg" >
        <view-box>
            <x-header :left-options="{showBack:false}">订单</x-header>
            <div >
                <div class="order">
                    <p class="orderNumber">
                        <span class="state">已取消</span>
                        <span class="number">2019042320360812</span>

                    </p>
                    <div class="orderCenter">
                        <span class="orderState">订单已经取消</span>
                        <p>
                            <span class="title">手术时间：</span>
                            <span class="content">2019-04-30 12:00</span>
                        </p>
                        <p>
                            <span class="title">下单时间：</span>
                            <span class="content">2019-04-23 20:36:08</span>
                        </p>
                        <p>
                            <span class="title">手术医院：</span>
                            <span class="content">天津市河东区中心第三医院</span>
                        </p>
                    </div>
                    <div class="orderBottom">
                        <p>
                            实付款：
                            <span>￥3500</span>
                        </p>
                    </div>
                </div>
                <div class="order">
                    <p class="orderNumber">
                        <span class="state">已取消</span>
                        <span class="number">2019042320360812</span>

                    </p>
                    <div class="orderCenter">
                        <span class="orderState">订单已经取消</span>
                        <p>
                            <span class="title">手术时间：</span>
                            <span class="content">2019-04-30 12:00</span>
                        </p>
                        <p>
                            <span class="title">下单时间：</span>
                            <span class="content">2019-04-23 20:36:08</span>
                        </p>
                        <p>
                            <span class="title">手术医院：</span>
                            <span class="content">天津市河东区中心第三医院</span>
                        </p>
                    </div>
                    <div class="orderBottom">
                        <p>
                            实付款：
                            <span>￥3500</span>
                        </p>
                    </div>
                </div>
                <div class="order">
                    <p class="orderNumber">
                        <span class="state">已取消</span>
                        <span class="number">2019042320360812</span>

                    </p>
                    <div class="orderCenter">
                        <span class="orderState">订单已经取消</span>
                        <p>
                            <span class="title">手术时间：</span>
                            <span class="content">2019-04-30 12:00</span>
                        </p>
                        <p>
                            <span class="title">下单时间：</span>
                            <span class="content">2019-04-23 20:36:08</span>
                        </p>
                        <p>
                            <span class="title">手术医院：</span>
                            <span class="content">天津市河东区中心第三医院</span>
                        </p>
                    </div>
                    <div class="orderBottom">
                        <p>
                            实付款：
                            <span>￥3500</span>
                        </p>
                    </div>
                </div>
                <div class="order">
                    <p class="orderNumber">
                        <span class="state">已取消</span>
                        <span class="number">2019042320360812</span>

                    </p>
                    <div class="orderCenter">
                        <span class="orderState">订单已经取消</span>
                        <p>
                            <span class="title">手术时间：</span>
                            <span class="content">2019-04-30 12:00</span>
                        </p>
                        <p>
                            <span class="title">下单时间：</span>
                            <span class="content">2019-04-23 20:36:08</span>
                        </p>
                        <p>
                            <span class="title">手术医院：</span>
                            <span class="content">天津市河东区中心第三医院</span>
                        </p>
                    </div>
                    <div class="orderBottom">
                        <p>
                            实付款：
                            <span>￥3500</span>
                        </p>
                    </div>
                </div>
                <div class="order">
                    <p class="orderNumber">
                        <span class="state">已取消</span>
                        <span class="number">2019042320360812</span>

                    </p>
                    <div class="orderCenter">
                        <span class="orderState">订单已经取消</span>
                        <p>
                            <span class="title">手术时间：</span>
                            <span class="content">2019-04-30 12:00</span>
                        </p>
                        <p>
                            <span class="title">下单时间：</span>
                            <span class="content">2019-04-23 20:36:08</span>
                        </p>
                        <p>
                            <span class="title">手术医院：</span>
                            <span class="content">天津市河东区中心第三医院</span>
                        </p>
                    </div>
                    <div class="orderBottom">
                        <p>
                            实付款：
                            <span>￥3500</span>
                        </p>
                    </div>
                </div>
                <div class="order">
                    <p class="orderNumber">
                        <span class="state">已取消</span>
                        <span class="number">2019042320360812</span>

                    </p>
                    <div class="orderCenter">
                        <span class="orderState">订单已经取消</span>
                        <p>
                            <span class="title">手术时间：</span>
                            <span class="content">2019-04-30 12:00</span>
                        </p>
                        <p>
                            <span class="title">下单时间：</span>
                            <span class="content">2019-04-23 20:36:08</span>
                        </p>
                        <p>
                            <span class="title">手术医院：</span>
                            <span class="content">天津市河东区中心第三医院</span>
                        </p>
                    </div>
                    <div class="orderBottom">
                        <p>
                            实付款：
                            <span>￥3500</span>
                        </p>
                    </div>
                </div>
                <div class="order">
                    <p class="orderNumber">
                        <span class="state">已取消</span>
                        <span class="number">2019042320360812</span>

                    </p>
                    <div class="orderCenter">
                        <span class="orderState">订单已经取消</span>
                        <p>
                            <span class="title">手术时间：</span>
                            <span class="content">2019-04-30 12:00</span>
                        </p>
                        <p>
                            <span class="title">下单时间：</span>
                            <span class="content">2019-04-23 20:36:08</span>
                        </p>
                        <p>
                            <span class="title">手术医院：</span>
                            <span class="content">天津市河东区中心第三医院</span>
                        </p>
                    </div>
                    <div class="orderBottom">
                        <p>
                            实付款：
                            <span>￥3500</span>
                        </p>
                    </div>
                </div>
            </div>
        </view-box>

    </div>

</template>


<script>
    import {XButton, XHeader,ViewBox} from 'vux'

    export default {
        name: 'order',
        data() {
            return {}
        },
        components: {
            XButton,
            XHeader,
            ViewBox,
        }
    }
</script>

<style lang="less" scoped>
    @import '../common/css/home.less';

    .orderBg{
        height: 100%;
        margin-top: 46px;
        background: rgb(242,244,246);
    }
    .order{
        background: #ffffff;
        width: 100%;
        height: 155px;
        border-bottom: 1px solid #F2F2F2;
        margin-top: 15px;
        .orderNumber{
            position: relative;
            display: flex;
            padding: 0 10px;
            flex-direction: row-reverse;
            align-items: center;
            justify-content: center;
            height: 35px;
            border-bottom: 1px solid #F2F2F2;
            .state{
                width: 85px;
                text-align: right;
                font-size: 12px;
                color: #000;
            }
            .number{
                flex: 1;
                color: #707070;
                font-size: 14px;
            }
        }
        .orderCenter{
            width: 95%;
            margin: 0 auto;
            height: 65px;
            padding: 10px 0;
            display: flex;
            flex-direction: column;
            border-bottom: 1px solid #F2F2F2;
            position: relative;
            .orderState{
                position: absolute;
                top: 10px;
                right: 0;
                font-size: 12px;
            }
            >p{
                width: 100%;
                display: flex;
                font-size: 12px;
                flex:1;
                .title{
                    flex:1
                }
                .content{
                    flex: 3;
                }
            }
        }
        .orderBottom{
            display: flex;
            flex-direction: row-reverse;
            align-items: center;
            padding-right: 10px;
            height: 30px;
            p{
                font-size: 12px;
                span{
                    color: #E4393C;
                    font-size: 14px;
                    font-weight: bold;
                }
            }
        }
    }

</style>
